<template>
    <div :class="centerCss" v-show="centerCss">
       <div class="center-headr"> 
          <img src="http://sdd-merchant-imgs.oss-cn-shanghai.aliyuncs.com/common/202407021632046723.png" alt="" />
          <div class="headr-middle"> 
            <div class="middle-icon"> 
             <img src="http://sdd-merchant-export.oss-cn-shanghai.aliyuncs.com/sys_image/202408011653529382.png" />
           </div>
           <div class="middle-title">
              <p> 慧 经 营 乐 收 赢 </p>
            </div>
          </div>
       </div>
       <div class="center-middle">
            <div class="middle-btn" @click="appDownload">
                <p> 点击安装APP </p>
            </div>
       </div>
       <div class="center-tips">
          <p> 银飞数智 </p>
       </div>
       <!-- <div class="tips-img">
         <img src="http://sdd-merchant-imgs.oss-cn-shanghai.aliyuncs.com/common/202407021812012163.jpg"/>
       </div> -->
    </div>
</template>
<script>
import router from "../../router"
export default{
    name: "乐收赢下载",
    data(){
        return{
            centerCss:''
        }
    },
    mounted(){
        // console.log(navigator.userAgent)
        // this.$route.name = '乐收赢下载'
        document.title = "乐收赢下载"
       
    },
    created(){
        
        const u = navigator.userAgent;
                const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (isiOS) {
                    this.centerCss =  "ios-center"
                } else {
                    return this.centerCss = 'ad-center'
                }
    },
    methods:{
        appDownload(){
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = 'https://sdd-merchant-imgs.oss-cn-shanghai.aliyuncs.com/app/lsy.apk'
            link.setAttribute('download', '乐收赢下载')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            
        }
    }
}
</script>

<style scoped lang="less" > 
.ios-center{
    width:100vw;
    height:100vh;
    background-color:#F2F2F2;
}
.ios-center .center-headr img{
    width:100%;
    height:985px;
}
.ios-center .center-headr{
    width:100%;
    position:relative;
}
.ios-center .headr-middle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    position: absolute;
    bottom:-30px;
    // top:590px;
    left:calc((100vw - 370px) / 2);
}
.ios-center .center-middle{
    

}
.ios-center .middle-icon{
    width:330px;
    height:370px;
    background-color:#F2F2F2;
    border-radius:20px;
    overflow: hidden;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1);
    z-index:99;
}
.ios-center .middle-title{
    font-size:48px;
    color:#465FA1;
    margin-top:25px;
}
.ios-center .middle-icon img{
    width:320px;
    height:360px;
}
.ios-center .middle-btn{
    font-size:50px;
    color:#fff;
    width:420px;
    height:125px;
    border-radius:60px;
    background-image: linear-gradient(to right, #F5891D, #E04F18);
    line-height:125px;
    text-align:center;
    margin:auto;
    margin-top:180px;
    
}
.ios-center span {
    font-size:54px;
 }
 .ios-center .center-tips{
    width:100%;
    font-size:42px;
    color:#000;
    display:flex;
    justify-content:center;
    position:absolute;
    bottom:80px;
 }
 .ad-center{
    width:100vw;
    height:100vh;
    background-color:#F2F2F2;
}
.ad-center .center-headr img{
    width:100%;
    height:738px;
}
.ad-center .center-headr{
    width:100%;
    position:relative;
}
.ad-center .headr-middle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    position: absolute;
    bottom:-22.5px;
    // top:590px;
    left:calc((100vw - 247.5px) / 2);
}
.ad-center .center-middle{
    

}
.ad-center .middle-icon{
    width:280px;
    height:250px;
    background-color:#F2F2F2;
    border-radius:15px;
    overflow: hidden;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1);
    z-index:99;
}
.ad-center .middle-title{
    font-size:30px;
    color:#465FA1;
    margin-top:34px;
}
.ad-center .middle-icon img{
    width:280px;
    height:250px;
}
.ad-center .middle-btn{
    font-size:37.5px;
    color:#fff;
    width:315px;
    height:93px;
    border-radius:60px;
    background-image: linear-gradient(to right, #5f85eb, #3D5597);
    line-height:93px;
    text-align:center;
    margin:auto;
    margin-top:90px;
    
}
.ad-center span {
    font-size:30px;
 }
 .ad-center .center-tips{
    width:100%;
    font-size:30px;
    color:#000;
    display:flex;
    justify-content:center;
    position:absolute;
    bottom:60px;
 }
</style>
